<template>
  <div class="content-box">
    <div class="content-box-item">
      <div class="content-box-item-header">
        <div class="content-box-item-title">标题1</div>
        <div class="content-box-item-btn">按钮</div>
      </div>
      <div class="content-box-item-text">
        One part of your experience can be acquired in a non EASA AMO. <br />
        However the majority of the experience need to be acquired in an EASA
        Part 145.<br />
        Logbook is available to download at (<a href="">F-50-05-0</a>) or get
        access to ourelectronic logbook via
        <a href="https://www.osac.aero.">https://www.osac.aero.</a> <br />
        Or to use our electronic logbook click here:
        <a href="https://www.fly2sc.com/Users/log.php"
          >https://www.fly2sc.com/Users/log.php</a
        ><br />
        The logbook and the page 4 (one per company) of F-50-00-1 have to be
        attested by your quality or maintenance manager.<br />
        Supporting Documents required to submit : <br /><br />
        - <a href="">FApplication form F-50-00-1</a> <br />
        - ID Passport,<br />
        - Proof of address (less than 3 month),<br />
        - EASA form 148 (modules certificates),<br />
        - Logbook experience (sort by date),At least 100 recent tasks <br />
        - EASA Form 149 (type training course certificate) + OJT : if completed.
        <br /><br />
        These documents have to be sent by our website www.osac.aero (only in
        French for now) via 《 services 》 then 《 mécaniciens 》 then 《
        Demande Initiale de licence Part-66 》.
        <br />
        For information, this request is billed 1290€ for all people living and
        working outside the European Union and the processing time is
        approximately 5/6 months.
      </div>
    </div>
    <div class="divider-line"></div>
    <div class="content-box-item">
      <div class="content-box-item-header">
        <div class="content-box-item-title">标题1</div>
        <div class="content-box-item-btn">按钮</div>
      </div>
      <div class="content-box-item-text">
        One part of your experience can be acquired in a non EASA AMO. <br />
        However the majority of the experience need to be acquired in an EASA
        Part 145.<br />
        Logbook is available to download at (<a href="">F-50-05-0</a>) or get
        access to ourelectronic logbook via
        <a href="https://www.osac.aero.">https://www.osac.aero.</a> <br />
        Or to use our electronic logbook click here:
        <a href="https://www.fly2sc.com/Users/log.php"
          >https://www.fly2sc.com/Users/log.php</a
        ><br />
        The logbook and the page 4 (one per company) of F-50-00-1 have to be
        attested by your quality or maintenance manager.<br />
        Supporting Documents required to submit : <br /><br />
        - <a href="">FApplication form F-50-00-1</a> <br />
        - ID Passport,<br />
        - Proof of address (less than 3 month),<br />
        - EASA form 148 (modules certificates),<br />
        - Logbook experience (sort by date),At least 100 recent tasks <br />
        - EASA Form 149 (type training course certificate) + OJT : if completed.
        <br /><br />
        These documents have to be sent by our website www.osac.aero (only in
        French for now) via 《 services 》 then 《 mécaniciens 》 then 《
        Demande Initiale de licence Part-66 》.
        <br />
        For information, this request is billed 1290€ for all people living and
        working outside the European Union and the processing time is
        approximately 5/6 months.
      </div>
      <div class="download-list">
        <div class="download-item" v-for="i in 2" :key="i">
          <svg
            class="file-icon"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M21.0002 23.5502H6.60019C5.52324 23.5502 4.6502 22.6772 4.6502 21.6002V2.40024C4.6502 1.32329 5.52324 0.450244 6.6002 0.450244H16.2002C16.2729 0.450244 16.3427 0.47914 16.3941 0.530574L22.8699 7.00631C22.9213 7.05774 22.9502 7.1275 22.9502 7.20024V21.6002C22.9502 22.6772 22.0772 23.5502 21.0002 23.5502Z"
              fill="white"
              stroke="#D0D5DD"
              stroke-width="0.9"
            />
            <path
              d="M16.2002 0.300247V4.80025C16.2002 6.12573 17.2747 7.20025 18.6002 7.20025H23.1002"
              stroke="#D0D5DD"
              stroke-width="0.9"
            />
            <rect
              x="0.599609"
              y="10.9002"
              width="15.6"
              height="9.4"
              rx="1.2"
              fill="#D92D20"
            />
            <path
              d="M2.89879 18.1002V13.7366H4.62038C4.95135 13.7366 5.23331 13.7998 5.46626 13.9262C5.69922 14.0512 5.87678 14.2252 5.99893 14.4482C6.12251 14.6698 6.1843 14.9255 6.1843 15.2153C6.1843 15.5051 6.1218 15.7607 5.9968 15.9823C5.8718 16.2039 5.6907 16.3765 5.45348 16.5001C5.21768 16.6237 4.93217 16.6855 4.59695 16.6855H3.49964V15.9461H4.4478C4.62536 15.9461 4.77166 15.9156 4.88672 15.8545C5.0032 15.792 5.08984 15.7061 5.14666 15.5967C5.2049 15.4859 5.23402 15.3588 5.23402 15.2153C5.23402 15.0704 5.2049 14.944 5.14666 14.836C5.08984 14.7267 5.0032 14.6421 4.88672 14.5825C4.77024 14.5214 4.62251 14.4909 4.44354 14.4909H3.82138V18.1002H2.89879ZM8.33043 18.1002H6.78356V13.7366H8.34322C8.78214 13.7366 9.15998 13.824 9.47674 13.9987C9.7935 14.172 10.0371 14.4213 10.2076 14.7465C10.3794 15.0718 10.4654 15.461 10.4654 15.9142C10.4654 16.3687 10.3794 16.7593 10.2076 17.086C10.0371 17.4127 9.79208 17.6634 9.47248 17.8382C9.1543 18.0129 8.77362 18.1002 8.33043 18.1002ZM7.70614 17.3098H8.29208C8.56481 17.3098 8.79421 17.2615 8.98029 17.1649C9.16779 17.0669 9.30842 16.9156 9.40217 16.711C9.49734 16.5051 9.54492 16.2394 9.54492 15.9142C9.54492 15.5917 9.49734 15.3282 9.40217 15.1237C9.30842 14.9191 9.1685 14.7686 8.98242 14.672C8.79634 14.5754 8.56694 14.5271 8.29421 14.5271H7.70614V17.3098ZM11.1488 18.1002V13.7366H14.038V14.4973H12.0714V15.537H13.8462V16.2977H12.0714V18.1002H11.1488Z"
              fill="white"
            />
          </svg>
          <span class="file_name">工作总结报告.pdf</span>
          <svg
            class="download-icon"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M17.5 12.5002V13.5002C17.5 14.9004 17.5 15.6004 17.2275 16.1352C16.9878 16.6056 16.6054 16.9881 16.135 17.2278C15.6002 17.5002 14.9001 17.5002 13.5 17.5002H6.5C5.09987 17.5002 4.3998 17.5002 3.86502 17.2278C3.39462 16.9881 3.01217 16.6056 2.77248 16.1352C2.5 15.6004 2.5 14.9004 2.5 13.5002V12.5002M14.1667 8.33358L10 12.5002M10 12.5002L5.83333 8.33358M10 12.5002V2.50024"
              stroke="#36434D"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>
    <div class="divider-line"></div>
    <div class="content-box-item">
      <div class="content-box-item-title">标题3</div>
      <UploadImg></UploadImg>
    </div>
    <div class="divider-line"></div>
    <div class="content-box-item">
      <div class="content-box-item-title">标题4</div>
      <div class="content-link-input">
        <span>链接</span>
        <a-input placeholder="请输入链接" v-model:value="linkValue"></a-input>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject, onBeforeMount, ref } from "vue";
import { postTrainingList } from "../../../api/aviation";
import type { CourseTrainingListItem } from "../../../types/aviation";

const linkValue = ref("www.google.com");

const navActiveIndex = inject("navActiveIndex")!;
const courseSubmitTabList = inject("courseSubmitTabList")!;
const customTrainingList = ref<CourseTrainingListItem[]>();
const trainingId = inject("trainingId");
const getCustomTrainingData = async () => {
  let item = courseSubmitTabList.value[navActiveIndex.value]!;
  let course_id = item.course_id;
  let res = await postTrainingList(trainingId.value, course_id);
  if (res.code === 200) {
    customTrainingList.value = res.data;
  }
};

onBeforeMount(() => {
  getCustomTrainingData();
});
</script>
<style scoped lang="less">
@import url("../../../pages/profile/index/common.less");
.content-box-item-text {
  color: #36434d;
  line-height: 30px;
  font-size: 14px;
  a {
    color: #428bf2;
  }
}
.content-box-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content-box-item-btn {
  width: 52px;
  height: 32px;
  background: rgba(61, 136, 242, 0.1);
  border-radius: 10px 10px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #3d88f2;
  cursor: pointer;
}
.download-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  .download-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #36434d;
    cursor: pointer;
  }
  .file_name {
    margin-left: 12px;
    margin-right: 8px;
  }
  .file-icon {
    width: 24px;
    height: 24px;
  }
  .download-icon {
    width: 20px;
    height: 20px;
  }
}
.content-link-input {
  display: flex;
  align-items: center;
  gap: 24px;
  span {
    font-size: 14px;
    color: #36434d;
  }
  .ant-input {
    width: 541px;
    height: 40px;
    font-size: 14px;
    color: #36434d;
    padding: 10px 8px;
    border-radius: 10px;
  }
}
</style>
